<template>

    <el-dialog :title="btnType == 0 ? '添加' : '编辑'" :visible.sync="dialogVisible" width="50%"
        :before-close="handleClose">

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="患者名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="就诊卡号" prop="card">
                <el-input v-model.number="ruleForm.card"></el-input>
            </el-form-item>
            <el-form-item label="身份证" prop="identity">
                <el-input v-model.number="ruleForm.identity"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model.number="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="挂号科室" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择挂号科室">
                    <el-option label="肛肠科" :value="0"></el-option>
                    <el-option label="儿科" :value="1"></el-option>
                    <el-option label="妇产科" :value="2"></el-option>
                    <el-option label="耳鼻喉科" :value="3"></el-option>
                    <el-option label="眼科" :value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="挂号费" prop="cost">
                <el-input v-model.number="ruleForm.cost"></el-input>
            </el-form-item>


            <el-form-item label="挂号类型" prop="type">
                <el-radio-group v-model="ruleForm.type">
                    <el-radio :label='0'>普通号</el-radio>
                    <el-radio :label='1'>专家号</el-radio>
                    <el-radio :label='2'>医师号</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="挂号状态" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                    <el-radio :label="0">已就诊</el-radio>
                    <el-radio :label="1">未就诊</el-radio>
                    <el-radio :label="2">已取消</el-radio>
                </el-radio-group>
            </el-form-item>




            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="guanbiTk">取 消</el-button>

        </span>
    </el-dialog>
</template>

<script>


import { addfunApi, bjfunApi } from '../../../api/interface'
export default {

    props: ['row', 'btnType'],
    data() {
        return {
            dialogVisible: true,

            ruleForm: {
                id: '',
                name: '', //患者名称
                card: '', //就诊卡号
                identity: '',//身份证
                phone: '',//手机号
                region: '',//挂号科室
                cost: '',//挂号费 
                date1: '',//选择日期  
                date2: '', //选择时间 / 
                delivery: false,
                type: '',//挂号类型   
                resource: '',//挂号状态

            },

            rules: {
                name: [
                    { required: true, message: '请输入患者名称', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                card: [
                    { required: true, message: '请输入就诊卡号', trigger: 'blur' },

                ],
                identity: [
                    { required: true, message: '请输入身份证', trigger: 'blur' },

                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },

                ],
                region: [
                    { required: true, message: '请选择挂号科室', trigger: 'change' }
                ],

                type: [
                    { required: true, message: '请至少选择一个挂号类型', trigger: 'change' }
                ],

                resource: [
                    { required: true, message: '请选择挂号状态', trigger: 'change' }
                ],

            }
        };


    },

    mounted() {
        this.ruleForm = JSON.parse(JSON.stringify(this.row))
    },
    methods: {

        //关闭弹框
        guanbiTk() {
            this.$emit('guanbitankuang')
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                    this.guanbiTk()
                })
                .catch(_ => { });
        },
        onSubmit() {
            console.log('submit!');
        },



        //添加表单验证
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {

                    if (this.btnType == 0) {
                        addfunApi(this.ruleForm).then(res => {
                            console.log('res', res);
                            if (res.code == 200) {
                                this.$emit('guanbitankuang')  //关闭弹框
                                this.$emit('shuaxinbiaoge') //刷新表格,重新获取页面

                            }

                        })

                    } else {
                        bjfunApi(this.ruleForm).then(res => {
                            console.log('res', res);
                            this.$emit('guanbitankuang')  //关闭弹框
                            this.$emit('shuaxinbiaoge') //刷新表格,重新获取页面

                        })

                    }
                    console.log(this.ruleForm);

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }



}

</script>


<style>
</style>